<!-- src/views/AuthorDetail.vue -->
<template>
  <div class="author-detail container">
    <div v-if="loading">加载中...</div>
    <div v-else-if="!author">未找到该作者信息。</div>

    <div v-else>
      <!-- 1. 作者信息区 -->
      <section class="author-bio-section">
        <h1>{{ author.name }}</h1>
        <p class="meta-info">
          派系:
          <span class="style-name">{{ author.style?.name || '未知派系' }}</span>
          | 年代: {{ author.era || '当代' }}
        </p>
        <p class="bio">{{ author.bio }}</p>
      </section>

      <!-- 2. 作者作品集 -->
      <section class="author-works-section">
        <h2>作品集</h2>
        <div class="template-grid">
          <TemplateCard
            v-for="template in templates"
            :key="template.id"
            :template="template"
            @click="goToTemplateDetail(template.id)"
          />
        </div>
        <!-- 待实现：分页控制 -->
      </section>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, defineProps } from 'vue'
import { useRouter } from 'vue-router'
import TemplateCard from '@/components/TemplateCard.vue'
import { getAuthorDetails, searchTemplatesByAuthorId } from '@/api/authorApi' // 假设创建了 authorApi.js

const props = defineProps({
  id: { type: [Number, String], required: true }, // 接收路由参数 :id
})

const router = useRouter()
const author = ref(null)
const templates = ref([])
const loading = ref(true)

const fetchAuthorData = async () => {
  loading.value = true
  try {
    // H1: 获取作者详情
    const authorRes = await getAuthorDetails(props.id) // GET /api/authors/{id}
    author.value = authorRes.data

    // H2: 获取该作者的所有模板 (使用 TemplateController 的搜索功能)
    const templatesRes = await searchTemplatesByAuthorId(props.id)
    templates.value = templatesRes.data
  } catch (error) {
    console.error('加载作者详情失败:', error)
  } finally {
    loading.value = false
  }
}

const goToTemplateDetail = (templateId) => {
  router.push(`/templates/${templateId}`)
}

onMounted(fetchAuthorData)
</script>

<style scoped>
/* 确保页面的根容器有足够的内边距 */
.author-detail.container {
  max-width: 1200px; /* 示例：限制最大内容宽度 */
  margin: 0 auto;
  padding: 20px;
}

/* 调整作品集 Grid 的样式 */
.template-grid {
  display: grid;
  /* 关键修改：减小最小宽度，让 Grid 容纳更多列，从而使每个卡片更小 */
  /*
       例如：从 250px 减小到 200px
       这样在同一屏幕宽度下，就能显示更多的列，每张卡片就小了。
    */
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* 示例：调整为 200px */
  gap: 20px;
  padding: 20px 0;
}

/* 确保作者信息区有足够空间 */
.author-bio-section {
  margin-bottom: 40px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}

h1 {
  font-size: 2em;
  margin-bottom: 5px;
}
.meta-info {
  color: #666;
  margin-bottom: 10px;
}
</style>
